<!DOCTYPE>
#{extends 'main.html' /}
<html>
<head>
    <title>Upload</title>
</head>
<body>
	<script type="text/javascript" >
		function updateStatus(){
			var statusAction = #{jsAction @downloadStatus() /}
			
			new $.ajax({
				method : "get",
				url : "/application/downloadStatus",
				success : function(html){
					if (html != $("#status").html()) {
						$("#status").html(html);
						updateFileStatus();
					}
				}
			});
		}
		
		function updateFileStatus() {
			$('.barStatus').each(function() {
				var current = $(this).attr('id').split('-')[0];
				var total = $(this).attr('id').split('-')[1];

				$(this).css({
					width : Math.round((current / total) * 100) + "%"
				});
			});
			$('.globalStat').each(function() {
				var current = $(this).attr('id').split('-')[0];
				var total = $(this).attr('id').split('-')[1];

				$(this).css({
					width : Math.round((current / total) * 100) + "%"
				});
			});
		}
		
		$(document).ready(function(){
			var holdStatusUpdate = setInterval(updateStatus, 3000);
		});
	</script>
	<div class="upload_box">
        <h1>Telecharger un Fichier Nzb</h1>
 
        #{form @upload(), method:'POST', enctype:'multipart/form-data'}
        <h4>Selectionnez un fichier</h4>
        <input type="file" name="nzbFile"/>
        <input type="submit"/>
        #{/form}
 
        #{if flash.success}
            <div class="greenbox">${flash.success}</div>
        #{/if}
 
        #{if flash.error}
        <div class="errorbox">${flash.error}</div>
        #{/if}
 	</div>
 	<div id="status">
 		
 	</div>
</body>
</html>
